<template>
    <div class="clearFix get-coords">
      <div id="map" class="map" ref="map"></div>
      <div class="foot">
        <p class="currentSite"><span>当前位置:</span> {{dizhi}}</p>
        <div class="clearfix lon-lat">
          <div class="lon fl">
            <p>经度</p>
            <input type="text" v-model="currLng">
          </div>
          <div class="lat fr">
            <p>纬度</p>
            <input type="text" v-model="currLat">
          </div>
        </div>
        <div class="button-wrap clearfix">

          <div class="select-button cancel fl" @click="$router.go(-1)">
            <i class="iconfont">&#xe607;</i>
            <span>取消</span>
          </div>
          <div class="select-button fr" @click="saveAddress">
            <i class="iconfont">&#xe61c;</i>
            <span>确认</span>
          </div>
        </div>
      </div>

      <loading v-model="isLoading">定位中...</loading>
    </div>
</template>
<script>
  import { mapState } from 'vuex';
//  import * as api from 'api'
//  import { transformLatLng, transformTobaidu } from '../../utils/location'
  let geolocation = new qq.maps.Geolocation('FXGBZ-M7MWF-BE3J7-JXQNO-VLMU7-BBF6Z', 'map');
  export default {
    data () {
      return {
        currLng: '',
        currLat: '',
        dizhi: '',
        iccid: '',
        address: '',
        isLoading: false
      }
    },

    components: {
      loading: require('@/components/loading')
    },

    created () {
      this.iccid = this.$route.params.iccid
    },

    computed: {
      ...mapState({
        lng: state => state.userInfo.address.location.lng,
        lat: state => state.userInfo.address.location.lat
      })
    },

    mounted () {
      this.title('设备定位');
      let updataLocation = (lat = 23.117055306224895, lng = 113.2759952545166) => {
        // 创建解析类
        let geocoder = new qq.maps.Geocoder();
        // 创建地图中心点
        let p = new qq.maps.LatLng(lat, lng);
        // 创建地图实例
        geocoder.getAddress(p);
        geocoder.setComplete((result) => {
          this.address = result.detail;
          var dz = result.detail.addressComponents;
          this.currLat = this.address.location.lat;
          this.currLng = this.address.location.lng;
          this.dizhi = dz.city + dz.district + dz.street + dz.streetNumber;
        })
        let map = new qq.maps.Map(this.$refs.map, {
          center: p,
          zoom: 19
        })
        var middleControl = document.createElement('div');
        middleControl.style.left = '0px';
        middleControl.style.top = '0px';
        middleControl.style.bottom = '0px';
        middleControl.style.right = '0px';
        middleControl.style.margin = 'auto';
        middleControl.style.position = 'absolute';
        middleControl.style.width = '38px';
        middleControl.style.height = '54px';
        middleControl.style.zIndex = '100000';
        middleControl.innerHTML = '<img src=""/>';
        this.$refs.map.appendChild(middleControl);
        qq.maps.event.addListener(map, 'dragend', () => {
          let center = map.getCenter();
          this.currLng = center.lng;
          this.currLat = center.lat;
          geocoder.getAddress(center);
          geocoder.setComplete((result) => {
            console.log(result);
            this.address = result.detail;
            let dz = result.detail.addressComponents;
            this.dizhi = dz.city + dz.district + dz.street + dz.streetNumber;
          })
        })
      }
      if (!this.longitude || !this.latitude) {
        this.isLoading = true
        geolocation.getLocation(
          (success) => {
            console.log(success);
            this.isLoading = false;
            updataLocation(success.lat, success.lng)
            this.Toast('定位成功');
          },
          error => {
            console.log(error);
            this.isLoading = false;
            this.Toast('定位失败');
            let lat = 23.117055306224895;
            let lng = 113.2759952545166;
            if (localStorage.getItem('latLng')) {
              console.log(localStorage.getItem('latLng'));
              [lat, lng] = JSON.parse(localStorage.getItem('latLng'))
            }
            console.log(lat, lng);
            updataLocation(lat, lng)
          },
          { timeout: 8000 })
      } else {
        this.currLng = this.lng;
        this.currLat = this.lat;
        updataLocation(this.currLng, this.currLat)
      }
    },

    methods: {
      saveAddress () {
        this.$store.dispatch('updateAddress', { code: 'map', data: this.address });
        let lng = this.address.location.lng;
        let lat = this.address.location.lat;
        localStorage.setItem('latLng', JSON.stringify([lat, lng]));
        this.$router.go(-1);
      }
    }
  }
</script>
<style lang="scss">
  @import "../../../styles/common/common";

  .get-coords {
    height: 100%;

  .map {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    bottom: px2rem(340);
  }

  .foot {
    background-color: #fff;
    position: absolute;
    height: px2rem(340);
    bottom: 0;
    width: 100%;

  p.currentSite {
    height: px2rem(99);
    line-height: px2rem(99);
    border-bottom: px2rem(2.1) solid #d7d7d7;
    text-align: center;
    margin: 0;
  }

  p {
  @include sc(px2rem(26), #999999);
    line-height: px2rem(26);
    margin: 0 px2rem(38);
    margin-top: px2rem(30);
  }

  .lon-lat {
    margin: 0 px2rem(38);
  }

  .lon, .lat {
    width: 50%;
  }

  .lon {
    padding-right: px2rem(15);
  }

  .lat {
    padding-left: px2rem(15);
  }

  .lon-lat input {
    height: px2rem(64);
    border: none;
    width: 100%;
    border-bottom: px2rem(2.1) solid #d7d7d7;

  &
  :focus {
    border-bottom-color: #479ef8;
    color: #479ef8;
  }

  }
  .button-wrap {
    margin: 0 px2rem(38);

  .select-button {
    border: px2rem(2.1) solid #d7d7d7;
    color: #479ef8;
    width: px2rem(324);
    margin: px2rem(20) 0;
    text-align: center;
  @include borderRadius(px2rem(10));
    vertical-align: middle;
    line-height: px2rem(70);

  i {
    color: #479ef8;
    vertical-align: middle;
  }

  span {
    display: inline-block;
    vertical-align: middle;
  }

  &
  .cancel {
    color: #9a9a9a;
    border-color: #9a9a9a;

  i {
    color: #9a9a9a;
  }

  }
  }
  }
  }
  }
</style>
